﻿<?php
session_start();
if(!$_SESSION['login'] || $_SESSION['login'] != 1){
    header('Location:../mm');
    exit;
}
require ('quanju.php');
$jkm = $_SESSION['jkm'];
$ztdx = 20;
$result = $conn->query("SELECT * FROM hg002 WHERE sjh='{$_SESSION['sjh']}'");
if($result && $row = mysqli_fetch_array($result)){
   $ztdx = $row['tybztdx'];
}
if($ztdx > 100 || $ztdx <= 0){
    $ztdx = 20;
}
$conn->close();
?>
<!DOCTYPE html>
<html>
  
  <head>
    <title>
      画板
    </title>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="browsermode" content="application"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <script type="text/javascript" src="js/zDrag.js"></script>
    <script type="text/javascript" src="js/zDialog.js"></script>
    <script type="text/javascript" src="../s/jquery-3.1.1.min.js"></script>
    <script>
    var sjh = '<?php echo $_SESSION['sjh']; ?>';
    </script>
    <script src="js/tyb2.js"></script>
    <style>
    .imgbox img{width:300px} 
    .top_fk{
        position: fixed;
        width: 50px;
        right: 80px;
        top: 0px;
        height:50px;
        line-height: 50px;
        background: url(images/tyb_hsfk.png) no-repeat 0px 50%;
        background-size:22px 22px;
        background-position:0px center;
    }
    .top_daohang{
        position: fixed;
        width: 40%;
        left: 0px;
        top: 0px;
        color:#cc9900;
        padding-left:15px;
        height:50px;
        font-size:17px;
        line-height: 50px;
        font-weight:500;
        background-size:25px 25px;
        background-position:0px center;
    }
    .top_yonghu{
        position: fixed;
        width: 50px;
        right: 40px;
        top: 0px;
        height:50px;
        line-height: 50px;
        background: url(images/ball.png) no-repeat 0px 50%;
        background-size:24px 24px;
        background-position:0px center;
    }
    .top_fenxiang{
        position: fixed;
        width: 50px;
        right: 0px;
        top: 0px;
        height:50px;
        line-height: 50px;
        background: url(images/bwl_fenxiang.png) no-repeat 0px 50%;
        background-size:22px 22px;
        background-position:0px center;
    }
    .bottom{
        z-index:3;
        position: fixed;
        width: 100%;
        left:0px;
        bottom: 0px;
              
    }img{width:100%}
    .gtp{
        text-align: center;
        max-height:50%;
    }img{
        width:100%
        }
    .top{
        z-index:3;
        position: fixed;
        width: 100%;
        left:0px;
        top: 0px;
        height:50px;
        line-height: 50px;
        background: url(images/bwl_bg.png);
    }
    .tyb{
        position: absolute;
        left:0px;
        top: 0px;
        width: 100%;
        height:100%;
        margin: 0;
        padding: 0;
        display: block;
    }
    .control-ops{
        display: none;
    }
    .xx{
        z-index:2;
        position: absolute;
        top: 50px;
        width: 100%;
        left:0px;
        bottom: 0px;
        font-size:<?php echo $ztdx; ?>px;
        
        
        display: none;
    }
    * {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
    }
    </style>
  </head>
  
  <body style="background: url(images/bwl_bg.png);height: 100%;width: 100%;margin: 0;padding: 0;">

  <div class="top"><div class="top_daohang" onclick="window.history.back();">完成</div><div onclick="qingkong();" id="fangkuaitubiao" class="top_fk"></div><div id="yonghutubiao" onclick="kaishihuoqu(this);" class="top_yonghu"></div><div onclick="if(confirm('对接码：<?php 
  if($jkm <= 0){
    echo '无';
  }else if($jkm % 10 == 9) echo 10 * ($jkm - $jkm % 10 + 10) + 10;
    else echo $jkm + 11;
  if($_SESSION['gjdj'] == 1){
    echo '，';
    if($_SESSION['XXjkm'] <= 0)
        echo '无';
    else
        echo $_SESSION['XXjkm'];
  }
    
   ?>\n是否断开？'))window.location.href='002.php?sx=1&dk=1';" class="top_fenxiang"></div></div>
   
   <div class="xx" id="xx" onclick="xsyc();"><div id="huidiao" style="text-align: center;"></div><div class="gtp" id="huidiao2"></div></div>
  <div id="jzcd" class="bottom" <?php
    if($_SESSION['tybazck'] == 1){
        echo 'ontouchstart="xsyc(1);"';
        echo ' ontouchend="xsyc(-1);" ontouchcancel="xsyc(-1);"';
    }else{
        echo 'onclick="xsyc(0);"';
    }
  
  ?>><img id="gjl" src="images/tyb_gjl.png" /></div>
    <canvas id="myCanvas" class="tyb"></canvas>
    <div style="text-align:center;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>
    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
 
    <div id="div1"></div>
  </body>
  
<script>
  
var canvas = document.getElementById('myCanvas');
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('touchstart', function(evt) {
        //evt.preventDefault();
        var touch = evt.touches[0];
        mouseX = touch.pageX;
        mouseY = touch.pageY;
        xLast = mouseX;
        yLast = mouseY;
        draw(mouseX + 1, mouseY + 1);
    }, false);
    document.addEventListener('touchend', function(evt) {
        mouseD = false;
    }, false);
canvas.addEventListener('touchmove', function(evt) {
        var touch = evt.touches[0];
        mouseX = touch.pageX;
        mouseY = touch.pageY;
        if (mouseY < height && mouseX < width) {
            evt.preventDefault();
            //$('.chalk').css('left', mouseX + 'px');
            //$('.chalk').css('top', mouseY + 'px');
            //$('.chalk').css('display', 'none');
        draw(mouseX, mouseY);
        }
    }, false);
function draw(x,y){
		ctx.strokeStyle = '#000000';
		ctx.beginPath();
  		ctx.moveTo(xLast, yLast);		
  		ctx.lineTo(x, y);
  		ctx.stroke();
          
  		// Chalk Effect
		var length = Math.round(Math.sqrt(Math.pow(x-xLast,2)+Math.pow(y-yLast,2))/(5/brushDiameter));
		var xUnit = (x-xLast)/length;
		var yUnit = (y-yLast)/length;
		xLast = x;
		yLast = y;
}
canvas.addEventListener('touchend', onMouseUp, false)
$('#myCanvas').css('width',$(window).width());
$('#myCanvas').css('height',$(window).height());
canvas.width = $(window).width();
canvas.height = $(window).height();
var width = canvas.width;
var height = canvas.height;
var xLast = 0;
var yLast = 0;
var mouseX;
var mouseY;
var brushDiameter = 7;
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2.0; // 设置线宽
ctx.strokeStyle = "#000000"; // 设置线的颜色
var flag = false;

function onMouseMove(evt) {
  evt.preventDefault();
  if (flag) {
    var p = pos(evt);
    ctx.lineTo(p.x, p.y);
    ctx.lineWidth = 2.0; // 设置线宽
    //ctx.shadowColor = "#fc1741";
    ctx.shadowBlur = 1;
    //ctx.shadowOffsetX = 6;
    ctx.stroke();
  }
}

function onMouseDown(evt) {
  evt.preventDefault();
  ctx.beginPath();
  var p = pos(evt);
  ctx.moveTo(p.x, p.y);
  flag = true;
}

function onMouseUp(evt) {
  evt.preventDefault();
  flag = false;
}
function pos(event) {
  var x, y;
  if (isTouch(event)) {
    x = event.touches[0].pageX;
    y = event.touches[0].pageY;
  } else {
    x = event.layerX;
    y = event.layerY;
  }
  return {
    x: x,
    y: y
  };
}

function isTouch(event) {
  var type = event.type;
  if (type.indexOf('touch') >= 0) {
    return true;
  } else {
    return false;
  }
}

function getWidth() {
  var xWidth = null;
  if (window.innerWidth !== null) {
    xWidth = window.innerWidth;
  } else {
    xWidth = document.body.clientWidth;
  }
  return xWidth;
}
function getHeight() {
  var xHeight = null;
  if (window.innerHeight !== null) {
    xHeight = window.innerHeight;
  } else {
    xHeight = document.body.clientHeight;
  }
  return xHeight;
}
</script>
  
</html>